{% extends "base.html" %}


{% autoescape off %} {% block title %}| {{game.name}} - {{trophy.name }} {% endblock %} {% endautoescape %}

{% block body %}

<center>
{% autoescape off %} <br/><h1>{{game.name}} </h1>
<h2>
		{% ifequal trophy.pic_url "0" %}
			<img class="meio" src="/media/hidden-lock.png" height=44 width=50 />
		{% else %}
			{% ifequal trophy.pic_url 'hidden.png' %}
				<img class="meio" src="/media/hidden-lock.png" width=54 height=54/>
			{% else %}
				<img class="meio" src="/media/{{ trophy.type}}.png" height=44 width=50 />
				<img class="meio" src="/media/game/{{game.psn_id}}/{{ trophy.pic_url}}" height=44 width=50 />
			{% endifequal %}
		{% endifequal %}
{{trophy.name}}</b></h2>
<h5>{{trophy.desc}}</h5>
{% endautoescape %}

<table>
	<tr>
	<td valign="top">
		<table>
		<tr>
			<tr><th colspan=2> Tem o trofeu </th></tr>
			<th> Usuario </th>
			<th> Data </th>
		</tr>
			{% for user_have in user_have_db %}
				<tr>
				<td align="left" style="border-right:0px"> <img class="meio" src="{{user_have.user.pic_url}}" height=20>
	         <a href= "/rank/{{ user_have.user.auth.username }}/game/{{game.psn_id}}"> {{ user_have.user.auth.username}} </a>

				</td>
				<td>
				<div style ="color:#999;font-style:normal;">
					{{ user_have.date|date:"d-m-y H:i:s" }}
				</div>

				</td>
				</tr>
			{% endfor %}
		</tr>
		</table>
	</td>

	<td valign="top">
		<table>
		<tr>
			<tr><th colspan=1> Nao tem o trofeu </th></tr>
			<th> Usuario </th>
		</tr>
		<tr>
			{% for user_not_have in user_not_have_db %}
				<td align="left" style="border-right:0px"> <img class="meio" src="{{user_not_have.pic_url}}" height=20>
	         <a href= "/rank/{{ user_not_have.auth.username }}/game/{{game.psn_id}}"> {{ user_not_have.auth.username}} </a>
				</div>
				</td>
				</tr>
			{% endfor %}
		</tr>
		</table>
	</td>
</table>

{% ifnotequal trophy.type 'platinum' %}
{% if not trophy.hidden_id %}

<br/>

<h1> Videos referentes a este trofeu </h1>

<center>

  <div id="videoControl">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Carregando...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  //
  // The Key Embedded in the following script tag is designed to work with
  // the following site:
  // http://myps3t.dyndns.org:8000
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vsw&key=ABQIAAAA_ibVSmc4ZdvhKxrpdBQj3RRirhbYrDDQsXQpoGZX1DGF79DcexS1IDffCMxEeNhvylyXAKmEQiehmA"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Search Control and Stylesheet -->
  <script type="text/javascript">
    window._uds_vsw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videosearch/gsvideosearch.js?mode=new"
    type="text/javascript"></script>

<style type="text/css">

/* tags */
div.tag_gsvsc {
  display : none;
}
/* footer */
.footerBox_gsvsc {
  display: none;
}


/* search form controls */
.searchForm_gsvsc table.gsc-search-box {
  display: none;
}

.searchForm_gsvsc table.gsc-search-box td {
  vertical-align : middle;
}


div.edit-tag_gsvsc {
  font-size : 51px;
  cursor : pointer;
  text-decoration : underline;
}

/* tiny results */
/* display states:
 * on while playing, off everytime else
 */
.playing_gsvsc .tiny-results_gsvsc {
  display : none;
}

.searching_gsvsc .tiny-results_gsvsc,
.editing_gsvsc .tiny-results_gsvsc,
.reading_gsvsc .tiny-results_gsvsc {
  display : none;
}

.tiny-results_gsvsc {
  margin-left : 0px;
}

.tiny-results_gsvsc div.tiny-video-result_gsvsc {
  border : 1px solid #0000cc;
  background-color : #000000;
  height : 41px;
  width : 54px;
  text-align : center;
}

.tiny-results_gsvsc div.tiny-video-result_gsvsc img {
  cursor : pointer;
}

.tiny-results_gsvsc table.video-result-table_gsvsc {
  width : 100%
}

.tiny-results_gsvsc table.video-result-table_gsvsc td {
  padding : 4px;
}


.playing_gsvsc .tiny-results_gsvsc {
  display : hidden;
}

/* footer */
.footerBox_gsvsc {
  clear : both;
  text-align : center;
}

.searching_gsvsc .results_gsvsc,
.reading_gsvsc .results_gsvsc {
  display : hidden;
}

#videosearch {
  width : 400px;
  margin : 400px;
  padding : 4px;
  border : 1px solid #f9f9f9;
}

.playerBox_gsvsc .player_gsvsc {
  width : 480px;
  height : 380px;
}

/* results */
.results_gsvsc {
  margin-left : 0px;
  text-align: center;
}


</style>

  <script type="text/javascript">
    function LoadVideoSearchControl() {
      var options = {
        twoRowMode : true
      };
      var videoSearch = new GSvideoSearchControl(
                              document.getElementById("videoControl"),
                              [{ query : "{{game.name}} {{trophy.name}} trophy"}], null, null, options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoSearchControl);
  </script>

</center>
		
{% endif %}
{% endifnotequal %}
{% endblock %}
